<template>
    <div class="my-input">
        <input @blur="blur" :type="type" :readonly="readonly" :value="modelValue" @input="iptChange" :placeholder="placeholder"/>
        <slot name="msg"></slot>
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        modelValue: String,
        placeholder: String,
        readonly: Boolean,
        type: {
            type: String,
            default: 'text'
        }
    },
    setup(context, attrs) {
        // context 是 setup的第一个参数 该参数中会包含props中的数据信息
        // 所以说通过context可以让我们操作props中的数据
        // console.log(context)
        // console.log(attrs)
        // 在 attrs中有一个emit方法 其实功能就相当于 vue2中的this.$emit
        function iptChange(e) {
            // update:key 可以更新key的值
            // 这里的意思就是更新modelValue的值为  e.target.value
            attrs.emit('update:modelValue', e.target.value)
        }

        // 当输入框失去焦点时
        function blur() {
            attrs.emit('blur')
        }
        return {
            iptChange,
            blur
        }
    }
}
</script>

<style scoped lang="scss">
.my-input {
    width: 100%;
    height: 90px;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    border-radius: 16px;
    margin-top:30px;
    input {
        border: none;
        outline: none;
        background-color:  rgba(0, 0, 0, 0);
        width: 100%;
        padding-left: 20px;
        font-size: 26px;
    }
}
</style>